<template>
<div class="bg-white">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <div class="index-header">
    <user-img></user-img>
    <div class="name">{{userMsg.name}}</div>
    <router-link tag="i" to="set" class="iconfont icon-set"></router-link>
  </div>
  <div class="index-body">
    <div class="index-body-ctx">
      <div class="week">{{weekTxt}}</div>
      <div class="date">{{dateTxt}}</div>
      <div class="menu cf displayflex">
        <router-link tag="div" to="egress/list" class="index-state flex1">
          <div class="txt">我的外出</div>
          <div class="num">{{userMsg.myoutcount || 0}}</div>
        </router-link>
        <router-link tag="div" to="leave/list" class="index-state flex1">
          <div class="txt">我的请假</div>
          <div class="num">{{userMsg.myleavecount || 0}}</div>
        </router-link>
        <router-link tag="div" to="businessTrip/list" class="index-state flex1">
          <div class="txt">我的出差</div>
          <div class="num">{{userMsg.mybiztripcount || 0}}</div>
        </router-link>
      </div>
      <div class="menu cf displayflex">
        <router-link tag="div" to="workOvertime/list" class="index-state flex1">
          <div class="txt">我的加班</div>
          <div class="num">{{userMsg.myovertimecount || 0}}</div>
        </router-link>
        <router-link tag="div" to="reimbursement/list" class="index-state flex1">
          <div class="txt">我的差旅报销</div>
          <div class="num">{{userMsg.myexpacccount || 0}}</div>
        </router-link>
        <router-link tag="div" to="dealt/list" class="index-state flex1">
          <div class="txt">我的待办</div>
          <div class="num" :class="{'red':userMsg.mytodocount>0}">{{userMsg.mytodocount || 0}}</div>
        </router-link>
      </div>
    </div>
  </div>
  <div class="index-menu cf">
     <a href="http://databi.csbr.cn/phone/#/" class="index-menu-wrap displayflex" v-show="userInfo.classofposition.indexOf('M')>-1">
      <i class="iconfont icon-shuju"></i>
      <div class="rit flex1">
        <div class="txt">数据驾驶舱</div>
        <div class="eng">Data Cockpit</div>
      </div>
    </a>
     <router-link tag="div" to="egress/form" class="index-menu-wrap displayflex">
      <i class="iconfont icon-outgoing"></i>
      <div class="rit flex1">
        <div class="txt">外出申请</div>
        <div class="eng">Outgoing Application</div>
      </div>
    </router-link>
      <router-link tag="div" to="leave/form" class="index-menu-wrap displayflex">
      <i class="iconfont icon-qingjia"></i>
      <div class="rit flex1">
        <div class="txt">请假申请</div>
        <div class="eng">Application for leave </div>
      </div>
    </router-link>
    <router-link tag="div" to="businessTrip/form" class="index-menu-wrap displayflex">
      <i class="iconfont icon-trip"></i>
      <div class="rit flex1">
        <div class="txt">出差申请</div>
        <div class="eng">On a business trip </div>
      </div>
    </router-link>
    <router-link tag="div" to="workOvertime/form" class="index-menu-wrap displayflex">
      <i class="iconfont icon-overtime"></i>
      <div class="rit flex1">
        <div class="txt">加班申请</div>
        <div class="eng">Work overtime</div>
      </div>
    </router-link>
    <router-link tag="div" to="reimbursement/form" class="index-menu-wrap displayflex">
      <i class="iconfont icon-travel"></i>
      <div class="rit flex1">
        <div class="txt">差旅报销申请</div>
        <div class="eng">Travel reimbursement</div>
      </div>
    </router-link>
    <router-link tag="div" to="notice" class="index-menu-wrap displayflex">
      <i class="iconfont icon-message" :class="{'has':userMsg.hasnewmsg}"></i>
      <div class="rit flex1">
        <div class="txt">消息通知</div>
        <div class="eng">Alerts</div>
      </div>
    </router-link>
  </div>
</div>
</template>
<script>
import userImg from "@/components/share/userImg.vue";
export default {
  components:{
    userImg
  },
  data() {
    return {
      weekTxt:'',
      dateTxt:'',
      userMsg:'',
      showLoad:true,
      showlevel:false,
    };
  },
  watch: {

  },
  computed: {
    userInfo(){
      return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
    },
  },
  created() {
    // console.log(this.userInfo.classofposition);
    this.getDayMsg();
    this.getUserInfo();
  },
  methods: {
    getUserInfo(){
      let data = {
            "staffid": this.userInfo.staffid
          },
          _this = this;

      this.Ajax.post('UserService/UserDataRefresh',data).then(function(resp) {
        if(resp.code == 'SUCC'){
          _this.userMsg = JSON.parse(resp.data);
          //  console.log(_this.userMsg);
        }else{
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
        _this.showLoad = false;
      });
    },
    getDayMsg(){
      let str = "";
      let dates = new Date()
      let week = dates.getDay();  
      let year = dates.getFullYear();
      let month = dates.getMonth()+1;
      let day = dates.getDate();
      if (week == 0) {  
        str = "星期日";  
      } else if (week == 1) {  
        str = "星期一";  
      } else if (week == 2) {  
        str = "星期二";  
      } else if (week == 3) {  
        str = "星期三";  
      } else if (week == 4) {  
        str = "星期四";  
      } else if (week == 5) {  
        str = "星期五";  
      } else if (week == 6) {  
        str = "星期六";  
      } 
      this.weekTxt = str;
      this.dateTxt = `${year}年${month}月${day}日`;
    }
  }
};
</script>